<template>
    <div class="app-container">

        <el-dialog :title="title" :visible="opensy" :before-close="cancelsy" width="1100px" destroy-on-close append-to-body>
            <el-form ref="formsy" :model="formsy" :rules="rules" label-width="120px">
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="车牌号" prop="carNo">
                            <el-input placeholder="请选择车辆" v-model="formsy.carNo" :readOnly="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车架号" prop="vinNo">
                            <el-input placeholder="请选择车辆" :readOnly="true" v-model="formsy.vinNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="车辆信息" prop="carInfo">
                            <el-input placeholder="请选择车辆" :readOnly="true" style="width: 43%;" v-model="formsy.carInfo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商业险保险公司" prop="compulsoryCompany" >
                            <el-select v-model="formsy.compulsoryCompany" @change="syCompany">
                                <template v-for="item in syList">
                                    <el-option :label="item.companyName" :value="item.companyNo" :key="item.companyNo"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商业险保单号" prop="compulsoryNo">
                            <el-input placeholder="请输入" v-model="formsy.compulsoryNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="商业险时间" prop="compulsoryTime">
                            <el-date-picker v-model="formsy.compulsoryTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商业险合计费用" prop="commercialTotalAmount">
                            <el-input placeholder="请选出险种进行计算" :disabled="true" v-model="formsy.commercialTotalAmount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="商业险备注" prop="compulsoryRemark">
                            <el-input placeholder="请输入" type="textarea" v-model="formsy.compulsoryRemark"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="商业险附件" prop="urlList">
                            <ImageUpload isArray v-model="formsy.urlList" :limit="3" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <row>
                            <el-col :span="12">
                                <el-form-item label="商业险险种" prop="xianzhong">
                                    <el-select v-model="formsy.xianzhong" placeholder="商业险险种" clearable :style="{ width: '100%' }" @change="xianzhongChange">
                                        <el-option v-for="item in dict.type.insuranceType" :key="item.value" :label="item.label" :value="parseInt(item.value)">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-button icon="el-icon-plus" type="text" @click="addXianzhong">添加</el-button>
                            </el-col>
                        </row>
                    </el-col>
                    <el-col :span="24">
                        <el-table :data="formsy.itemList">
                            <!-- <el-table-column label="险种类型">
                                <template slot-scope="{row}">
                                    <el-input placeholder="请输入" :disabled="true" v-model="row.insuranceType"></el-input>
                                </template>
                            </el-table-column> -->
                            <el-table-column label="险种名称">
                                <template slot-scope="{row}">
                                    <el-input placeholder="请输入" :disabled="true" v-model="row.insuranceName"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="保额（万元）">
                                <template slot-scope="{row}">
                                    <el-input placeholder="请输入" v-model="row.sumInsured"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="保费">
                                <template slot-scope="{row}">
                                    <el-input placeholder="请输入" @change="addAmount" v-model="row.insurancePremium"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="formsy.itemList.splice(scope.$index,1)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitSyform" :loading="loadingBtn">确 定</el-button>
                <el-button @click="cancelsy">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listInsurance, getInsurance, delInsurance, addInsurance, addSyInsurance, addJqInsurance, updateInsurance, exportInsurance, carBasicList, insuranceCompanyList } from "@/api/maintenance/insurance";

export default {
    name: "MmvSy",
    dicts: ['insuranceType'],
    props: {
        carId: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        opensy: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            loadingBtn: false,
            showShangye: false, // 显示选择商业险公司
            carBasicformsy: false,
            carBasicList: [],
            totalcarBasic: 0,
            // title: "",
            loading: true,
            xianzhong: {},
            insuranceName: null,
            formsy: {
                carNo: '', // 车牌号
                vinNo: '', // 车架号
                carInfo: '', // 车辆信息
                id: '', // 商业险id
                compulsoryCompany: {}, // 商业险保险公司
                compulsoryNo: '', // 商业险保单号
                compulsoryTime: [], // 商业险时间
                compulsoryAmount: '', // 商业险保险费用
                commercialTotalAmount: '', // 商业险合计费用
                compulsoryRemark: '', // 商业险备注
                urlList: [], // 商业险附件
                itemList: [], // 商业险险种
            },
            rules: {
                compulsoryCompany: [{ required: true, message: "保险公司必填" }],
                compulsoryNo: [{ required: true, message: "保单号必填", trigger: 'blur' }],
                compulsoryTime: [{ required: true, message: "时间必填", trigger: 'blur' }],
                compulsoryAmount: [{ required: true, message: "费用必填", trigger: 'blur' }],
                // urlList: [{ required: true, message: "必填", trigger:'focus' }],
				 xianzhong: [{ required: true, message: "险种必填" }],

            },
            syList: [], // 商业险保险公司
            carParams: {
                carNo: null,
                pageNum: 1,
                pageSize: 10,
            }
        };
    },
    computed: {
        formsyData() {
            const formsyData = {
                carId: this.formsy.carId, // 车辆ID
                carNo: this.formsy.carNo, // 车牌号
                vinNo: this.formsy.vinNo, // 车架号
                carInfo: this.formsy.carInfo, // 车辆信息
                compulsoryCompanyId: this.formsy.compulsoryCompanyId,
                compulsoryCompany: this.formsy.compulsoryCompany,
                compulsoryNo: this.formsy.compulsoryNo, // 商业险保单号
                compulsoryStartTime: this.formsy.compulsoryTime[0], // 商业险开始时间
                compulsoryEndTime: this.formsy.compulsoryTime[1], // 商业险结束时间
                compulsoryAmount: parseFloat(this.formsy.commercialTotalAmount), // 商业险保险费用
                commercialTotalAmount: parseFloat(this.formsy.commercialTotalAmount), // 商业险合计费用
                compulsoryRemark: this.formsy.compulsoryRemark, // 商业险备注
                urlList: this.formsy.urlList, // 商业险附件
                itemList: this.formsy.itemList, // 商业险险种
            };
            return formsyData;
        },
    },
    watch: {
        carId: {
            immediate: true,
            handler(val) {
                if (this.carId) {
                    this.getDetail(this.carId);
                }
            }
        }
    },
    mounted() {
        this.xianzhong = {}
        this.syxList()
        this.formsy.compulsoryCompanyId = null
        this.formsy.compulsoryCompany = null
    },
    methods: {
        //商业险
        syxList() {
            insuranceCompanyList(2).then(response => {
                this.syList = response.data;
            })
        },
        //险种
        xianzhongChange(val) {
            this.insuranceName = null
            this.xianzhong = {}
            this.dict.type.insuranceType.map(item => {
                if (val == item.value) {
                    this.insuranceName = item.label
                }
            })
            this.xianzhong = {
                "insuranceType": val,
                "insuranceName": this.insuranceName,
                "sumInsured": 0,
                "insurancePremium": 0,
            }
        },
        //添加险种
        addXianzhong() {
            if (this.xianzhong.insuranceType == null) {
                alert('请选择险种')
                return
            }

            this.formsy.commercialTotalAmount = 0
            if (!this.formsy.itemList.find(item => {
                return item.insuranceType == this.xianzhong.insuranceType
            })) {
                this.formsy.itemList.push(this.xianzhong)
                this.formsy.commercialTotalAmount = 0
                this.formsy.itemList.map(item => {
                    this.formsy.commercialTotalAmount = parseFloat(this.formsy.commercialTotalAmount) + parseFloat(item.insurancePremium)
                })
                this.xianzhong = {}
            } else {
                alert('当前险种已添加，请重新选择')
                return
            }

        },
        //计算商业保险费用
        addAmount() {
            this.formsy.commercialTotalAmount = 0
            this.formsy.itemList.map(item => {
                this.formsy.commercialTotalAmount = parseFloat(this.formsy.commercialTotalAmount) + parseFloat(item.insurancePremium)
            })
        },
        syCompany(val) {
            this.formsy.compulsoryCompanyId = val
            this.syList.map(item => {
                if (val == item.companyNo) {
                    this.formsy.compulsoryCompany = item.companyName
                }
            })
        },
        carRhandleQuery() {
            this.carParams.pageNum = 1;
            this.carNoClick(this.carParams);
        },
        carResetQuery() {
            this.resetformsy("carParam");
            this.carRhandleQuery();
        },
        carNoClick() {
            this.carBasicformsy = true
            this.loading = true;
            carBasicList(this.carParams).then(response => {
                this.carBasicList = response.rows;
                this.totalcarBasic = response.total;
                this.loading = false;
            });
        },
        selectCar(data) {
            this.carBasicformsy = false
            this.formsy.carId = data.carId;
            this.formsy.carNo = data.carNo;
            this.formsy.vinNo = data.vinNo;
            this.formsy.carInfo = data.carInfo;
        },
        emitData() {
            return this.formsyData;
        },
        async submitSyform() {
            this.loadingBtn = true;
            setTimeout(() => {
                this.loadingBtn = false;
            }, 2e3);
            this.$refs["formsy"]?.validate(valid => {
                if (valid) {
					if(this.formsy.itemList==null || this.formsy.itemList.length==0){
						alert('请选择险种')
						return;
					}
                    this.formsy.compulsoryStartTime = this.formsy.compulsoryTime[0], // 商业险开始时间
                        this.formsy.compulsoryEndTime = this.formsy.compulsoryTime[1], // 商业险结束时间
                        this.formsy.compulsoryAmount = parseFloat(this.formsy.commercialTotalAmount), // 商业险保险费用
                        addSyInsurance(this.formsy).then(response => {
                            this.$modal.msgSuccess("商业险险续保成功");
                            this.$emit("close")
                        });
                }
            });
        },
        cancelsy() {
            this.$emit("close")
        },
        async getDetail(carId) {

            const result = await getInsurance(carId);
            const data = result.data;
            this.formsy = Object.assign(this.formsy, result.data)
            this.formsy.carNo = data.carNo;// 车牌号
            this.formsy.vinNo = data.vinNo;// 车架号
            this.formsy.carInfo = data.carInfo;// 车辆信息
            this.formsy.id = '';// 商业险id
            this.formsy.compulsoryCompanyId = null;// 商业险保险公司编号
            this.formsy.compulsoryCompany = null; // 商业险保险公司名称
            this.formsy.compulsoryNo = null; // 商业险保单号
            this.formsy.compulsoryTime = []; // 商业险时间
            this.formsy.compulsoryAmount = null;// 商业险保险费用
            this.formsy.commercialTotalAmount = null; // 商业险合计费用
            this.formsy.compulsoryRemark = null;// 商业险备注
            this.formsy.urlList = []; // 商业险附件
            this.formsy.itemList = []; // 商业险险种
        },
    },
}
</script>
